<template>
<view class="container">
	<block v-if="isload">
		<view class="pageback" :style="{ background:backcolor==''?'#f58d40':backcolor}"></view>
		<view class="wrap" :style="'background-image:url(' + info.bgpic + ');background-size:100% 100%;'">
			<view class="header clearfix">
				<view class="rule" @tap="changemaskrule">活动规则</view>
				<view @tap="goto" :data-url="'myprize?hid=' + info.id" class="my">我的奖品</view>
			</view>
			<view class="title" :style="'background-image:url(' + info.banner + ');background-size:100% 100%;'"></view>
			<view class="canvas" :hidden="showmaskrule || jxshow || showqrpopup">
				<canvas canvas-id="roulette" style=" width: 650rpx; height: 650rpx;" v-if="showdzp">
					<!-- #ifndef MP-TOUTIAO -->
					<cover-image :src="pre_url + '/static/img/xydzp_start.png'" class="start" @tap="rollStart"></cover-image>
					<!-- #endif -->
				</canvas>
				<!-- #ifdef MP-TOUTIAO -->
				<image :src="pre_url + '/static/img/xydzp_start.png'" class="start" @tap="rollStart"></image>
				<!-- #endif -->
			</view>
			<view class="border" v-if="info.use_type != 2">您今日还有 <text id="change">{{remaindaytimes}}</text> 次抽奖机会</view>
			<view class="border2" v-if="info.use_type == 1 && info.usescore>0"><text v-if="!info.is_tr">每次</text><text v-else>本次</text>抽奖将消耗 <text>{{info.usescore}}</text> {{t('积分')}}，您共有 <text id="myscore">{{member.score}}</text> {{t('积分')}}</view>
			<view class="border2" v-if="info.use_type == 2 && info.usemoney>0">每次抽奖将消耗 <text>{{t('余额')}}</text>{{info.usemoney}}元 ，您共有 <text id="mymoney">{{member.money}}</text> 元</view>
            <!--滚动信息-->
			<view class="scroll">
				<view class="p" :style="'background-image: url('+pre_url+'/static/img/dzp/list.png);background-size:100% 100%;'"></view>
				<view class="sideBox">
					<swiper class="bd" autoplay="true" :indicator-dots="false" current="0" :vertical="true" circular="true">
						<swiper-item v-for="(item, index) in zjlist" :key="index" class="sitem" v-if="index%2==0">
							<view>恭喜{{item.nickname}} 获得<text class="info">{{item.jxmc}}</text></view>
							<view v-if="zjlist[index+1]">恭喜{{zjlist[index+1].nickname}} 获得<text class="info">{{zjlist[index+1].jxmc}}</text></view>
						</swiper-item>
					</swiper>
				</view>
			</view>

			<view id="mask-rule" v-if="showmaskrule">
				<view class="box-rule">
					<view class="h2">活动规则说明</view>
					<view id="close-rule" :style="'background-image:url('+pre_url+'/static/img/dzp/close.png);background-size:100%'" @tap="changemaskrule"></view>
					<view class="con">
						<view class="text">
							<text decode="true" space="true">{{info.guize}}</text>
						</view>
					</view>
				</view>
			</view>
			<!--中奖提示-->
			<view id="mask" v-if="jxshow && jx>0">
				<view class="blin"></view>
				<view class="caidai" :style="'background-image: url('+pre_url+'/static/img/dzp/dianzhui.png);'"></view>
				<view class="winning reback" :style="'background:url(' + pre_url + '/static/img/dzp/bg2.png) no-repeat;background-size:100% 100%;'">
					<view class="p">
						<view>恭喜您抽中了</view>
						<view class="b" id="text1">{{jxmc}}</view>
					</view>
					<view @tap="changemask" class="btn">确定</view>
				</view>
			</view>
			<!--未中奖提示-->
			<view id="mask2" v-if="jxshow && jx==0">
				<view class="blin"></view>
				<view class="caidai" :style="'background-image: url('+pre_url+'/static/img/dzp/dianzhui.png);'"></view>
				<view class="winning reback" :style="'background:url(' + pre_url + '/static/img/dzp/bg3.png) no-repeat;background-size:100% 100%;'">
					<view class="p">
						<view class="b text2" id="text2">{{jxmc}}</view>
					</view>
					<view @tap="changemask" class="btn">确定</view>
				</view>
			</view>
			
			<view v-if="showqrpopup" class="popup__container">
				<view class="popup__overlay" @tap.stop="hideqrmodal"></view>
				<view class="popup__modal" style="">
					<view class="popup__content">
						<view><image :data-url="info.qrcode" :src="info.qrcode" @tap="previewImage" ></image></view>
						<view class="txt" v-if="info.qrcode_tip">{{info.qrcode_tip}}</view>
					</view>
				</view>
			</view>
			
			
			<view id="mask-rule1" v-if="maskshow && !formdata">
				<view class="box-rule" style="height:640rpx">
					<view class="h2">请填写兑奖信息</view>
					<view id="close-rule1" :style="'background: no-repeat center / contain;background-image: url('+pre_url+'/static/img/dzp/close.png);'" @tap="changemaskshow"></view>
					<view class="con">
						<form class @submit="formsub">
						<view class="pay-form" style="margin-top:0.18rem">
							<view v-for="(item, idx) in info.formcontent" :key="idx" class="item flex-y-center">
								<view class="f1">{{item.val1}}：</view>
								<view class="f2 flex flex1">
									<block v-if="item.key=='input'">
										<input type="text" :name="'form' + idx" class="input" :placeholder="item.val2"></input>
									</block>
									<block v-if="item.key=='textarea'">
										<textarea :name="'form' + idx" class="textarea" :placeholder="item.val2"></textarea>
									</block>
									<block v-if="item.key=='radio'">
										<radio-group class="radio-group" :name="'form' + idx">
											<label v-for="(item1, index) in item.val2" :key="index">
													<radio :value="item1"></radio>{{item1}}
											</label>
										</radio-group>
									</block>
									<block v-if="item.key=='checkbox'">
										<checkbox-group :name="'form' + idx">
											<label v-for="(item1, index) in item.val2" :key="index">
												<checkbox :value="item1" class="xyy-zu"></checkbox>{{item1}}
											</label>
										</checkbox-group>
									</block>
									<block v-if="item.key=='switch'">
										<switch class="xyy-zu" value="1" :name="'form' + idx"></switch>
									</block>
									<block v-if="item.key=='selector'">
										<picker mode="selector" :name="'form' + idx" class="xyy-pic" :range="item.val2" @change="selector_editorBindPickerChange" :data-idx="idx" data-tplindex="0">
											<view class="picker" v-if="item.val2[selectIndex]"> {{item.val2[selectIndex]}}</view>
											<view v-else>请选择</view>
										</picker>
									</block>
									<block v-if="item.key=='time'">
										<picker mode="time" :name="'form' + idx" class="xyy-pic" @change="time_editorBindPickerChange" :data-idx="idx" data-tplindex="0">
											<view class="picker" v-if="picker_tmer">{{picker_tmer}}</view>
											<view v-else>选择时间</view>
										</picker>
									</block>
									<block v-if="item.key=='date'">
										<picker mode="date" :name="'form' + idx" class="xyy-pic" @change="date_editorBindPickerChange" :data-idx="idx" data-tplindex="0">
											<view class="picker" v-if="picker_date"> {{picker_date}}</view>
											<view v-else>选择日期</view>
										</picker>
									</block>
									<block v-if="item.key=='region'">
										<uni-data-picker style="color: #333;" class="flex1" :localdata="items" popup-title="请选择省市区"  @change="region_editorBindPickerChange"	:data-idx="idx" data-tplindex="0">
											<input type="text" :name="'form'+idx" :value="picker_region" placeholder="请选择省市区" placeholder-style="color:#fff;font-size:28rpx" style="border: none;font-size:28rpx;padding: 0rpx;color:#fff;"/>
										</uni-data-picker>
									</block>
								</view>
							</view>
							<view >
								<button class="subbtn" form-type="submit">确 定</button>
							</view>
						</view>
						</form>
					</view>
				</view>
			</view>
			
			
		</view>
	</block>
	<loading v-if="loading"></loading>
	<dp-tabbar :opt="opt"></dp-tabbar>
	<popmsg ref="popmsg"></popmsg>
	<wxxieyi></wxxieyi>
</view>
</template>

<script>
var dot_inter, bool;
var app = getApp();
var windowWidth = uni.getSystemInfoSync().windowWidth;

export default {
  data() {
    return {
			opt:{},
			loading:false,
      isload: false,
			menuindex:-1,
			
			pre_url:app.globalData.pre_url,
      speed: 10,

      /**转盘速度 */
      speedDot: 1000,

      /**点切换速度 */
      dotColor: ['#ffffff', '#FCDF00'],
      dotColor_1: ['#ffffff', '#FCDF00'],
      dotColor_2: ['#FCDF00', '#ffffff'],
      jxshow: false,
      showmaskrule: false,
			info:{},
			member:{},
			remaindaytimes:0,
			remaintimes:0,
			zjlist:[],
      jxarr: "",
      latitude: "",
      longitude: "",
      angelTo: "",
      jxmc: "",
      jx: "",
			backcolor: "",
			showqrpopup:false,
			showdoneqrcode:false,
			isinfo:false,
			maskshow: false,
			formdata: "",
			picker_tmer:'',
			picker_date:'',
			picker_region:'',
			items: [],
			showdzp:true
    };
  },

  onLoad: function (opt) {
		var that=this
		this.opt = app.getopts(opt);
		this.getdata();
		app.get('ApiIndex/getCustom',{}, function (customs) {
			var url = app.globalData.pre_url+'/static/area.json';
			uni.request({
				url: app.globalData.pre_url+'/static/area.json',
				data: {},
				method: 'GET',
				header: { 'content-type': 'application/json' },
				success: function(res2) {
					that.items = res2.data
				}
			});
		});
  },
	onPullDownRefresh: function () {
		this.getdata();
	},
  onShareAppMessage: function () {
		var that = this;
		var title = that.info.name;
		if (that.info.sharetitle) title = that.info.sharetitle;
		var sharepic = that.info.sharepic ? that.info.sharepic : '';
		var sharelink = that.info.sharelink ? that.info.sharelink : '';
		var sharedesc = that.info.sharedesc ? that.info.sharedesc : '';
		return this._sharewx({title:title,desc:sharedesc,link:sharelink,pic:sharepic,callback:function(){that.sharecallback();}});
  },
	onShareTimeline:function(){
		var that = this;
		var title = that.info.name;
		if (that.info.sharetitle) title = that.info.sharetitle;
		var sharepic = that.info.sharepic ? that.info.sharepic : '';
		var sharelink = that.info.sharelink ? that.info.sharelink : '';
		var sharedesc = that.info.sharedesc ? that.info.sharedesc : '';
		var sharewxdata = this._sharewx({title:title,desc:sharedesc,link:sharelink,pic:sharepic,callback:function(){that.sharecallback();}});
		var query = (sharewxdata.path).split('?')[1]+'&seetype=circle';
		return {
			title: sharewxdata.title,
			imageUrl: sharewxdata.imageUrl,
			query: query
		}
	},
  methods: {
		getdata: function () {
			var that = this;
			var id = that.opt.id;
			that.loading = true;
			app.get('ApiChoujiang/index', {id: id}, function (res) {
				that.loading = false;
				if(res.status == 0){
					app.alert(res.msg);
					return;
				}
				res.info.formcontent = JSON.parse(res.info.formcontent);
				that.info = res.info;
				that.jxarr = res.jxarr;
				that.member = res.member;
				that.remaindaytimes = res.remaindaytimes;
				that.remaintimes = res.remaintimes;
				that.zjlist = res.zjlist;
				that.backcolor = res.info.bgcolor;
				that.isinfo = res.isinfo
				if(	that.isinfo && res.record && res.record.formdata){
						that.formdata = res.record.formdata
				}
	
				uni.setNavigationBarTitle({
					title: res.info.name
				});
				if(that.info.qrcode){
					that.showqrpopup = true
				}
				that.downloadFile(res.jxarr, 0);
				if (that.info.fanwei == 1) {
					app.getLocation(function (res) {
						var latitude = res.latitude;
						var longitude = res.longitude;
						that.latitude = latitude;
						that.longitude = longitude;
						console.log(longitude);
					});
				}
				var title = that.info.name;
				if (that.info.sharetitle) title = that.info.sharetitle;
				var sharepic = that.info.sharepic ? that.info.sharepic : '';
				var sharelink = that.info.sharelink ? that.info.sharelink : '';
				var sharedesc = that.info.sharedesc ? that.info.sharedesc : '';
				that.loaded({title:title,desc:sharedesc,link:sharelink,pic:sharepic,callback:function(){that.sharecallback();}});
			});
		},
		showqrmodal:function(){
			if(this.info.qrcode){
				this.showqrpopup = true;
			}
			this.showdoneqrcode = true;
		},
		hideqrmodal:function(){
			this.showqrpopup = false;
		},
		sharecallback:function(){
			var that = this;
			app.post("ApiChoujiang/share", {hid: that.info.id}, function (res) {
				if (res.status == 1) {
					setTimeout(function () {
						that.getdata();
					}, 1000);
				} else if (res.status == 0) {//dialog(res.msg);
				}
			});
		},
    downloadFile: function (jxarr, i) {
      var that = this;
      if (jxarr[i].pic) {
        uni.downloadFile({
          url: jxarr[i].pic,
          success: function (res) {
            if (res.tempFilePath) {
              jxarr[i].pic = res.tempFilePath;
              that.jxarr = jxarr;
            }
          },
          complete: function () {
            if (jxarr.length > i + 1) {
              that.downloadFile(jxarr, i + 1);
            } else {
              that.dotStart();
            }
          }
        });
      } else {
        if (jxarr.length > i + 1) {
          that.downloadFile(jxarr, i + 1);
        } else {
          that.dotStart();
        }
      }
    },
    changemaskrule: function () {
      this.showmaskrule = !this.showmaskrule
    },
    changemask: function () {
      this.jxshow = !this.jxshow;
      this.getdata();
    },
		changemaskshow: function () {
		  var that = this;
		  that.maskshow = !that.maskshow;
			that.showdzp=true
		},
		time_editorBindPickerChange:function(e){
			this.picker_tmer = e.detail.value
		},
		selector_editorBindPickerChange:function(e){
			this.selectIndex = e.detail.value;
		},
		date_editorBindPickerChange:function(e){
			this.picker_date = e.detail.value;
		},
		region_editorBindPickerChange:function(e){
			const value = e.detail.value
			this.picker_region = value[0].text + ',' + value[1].text + ',' + value[2].text;
		},
    rollStart: function () {
      var that = this;
			if(that.isinfo){
				if(that.info.isbegin){
						app.error('活动未开始');return;
				}
				if(that.info.isend){
						app.error('活动已结束');return;
				}
				that.showdzp=false
				that.maskshow = true;return;
			}
      if (bool) return; // 如果在执行就退出
      bool = true; // 标志为 在执行
      app.post('ApiChoujiang/index', {id: that.info.id,op: 'getjx',longitude: that.longitude,latitude: that.latitude}, function (res) {
        if (res.status != 1) {
          app.alert(res.msg);
          bool = false;
          return;
        } else {
          //奖品数量等于10,指针落在对应奖品区域的中心角度[252, 216, 180, 144, 108, 72, 36, 360, 324, 288]
          var angel = 360 - 360 / res.jxcount * res.jxindex;
        }
        angel += 360 * 6;
        var baseStep = 30; // 起始滚动速度

        var baseSpeed = 0.3;
        var count = 1;
        var timer = setInterval(function () {
          that.angelTo = count
          clearInterval(dot_inter);
          that.drawCanvas();

          if (count == angel) {
            console.log('完毕');
						bool = false;
            clearInterval(timer);
						// #ifdef MP-TOUTIAO
						setTimeout(() => {
							that.jxshow = true;
							that.jxmc = res.jxmc;
							that.jx = res.jx;
							that.dotStart();
						},3000)
						// #endif
						// #ifndef MP-TOUTIAO
							that.jxshow = true;
							that.jxmc = res.jxmc;
							that.jx = res.jx;
							that.dotStart();
						// #endif
            if (res.jxtp == 2 && res.spdata) {
              uni.sendBizRedPacket({
                timeStamp: res.spdata.timeStamp,
                // 支付签名时间戳，
                nonceStr: res.spdata.nonceStr,
                // 支付签名随机串，不长于 32 位
                package: res.spdata.package,
                //扩展字段，由商户传入
                signType: res.spdata.signType,
                // 签名方式，
                paySign: res.spdata.paySign,
                // 支付签名
                success: function (res) {
                  console.log(res);
                },
                fail: function (res) {
                  console.log(res);
                },
                complete: function (res) {
                  console.log(res);
                }
              });
            }
          }

          count = count + baseStep * ((angel - count) / angel > baseSpeed ? baseSpeed : (angel - count) / angel);

          if (angel - count < 0.5) {
            count = angel;
          }
        }, that.speed);
      });
    },
    drawCanvas: function () {
      var that = this;
      var ctx = uni.createCanvasContext('roulette', this);
      var angelTo = this.angelTo || 0;
      var width = windowWidth / 750 * 650;
      var height = width;
      var x = width / 2;
      var y = width / 2;
      var num = that.jxarr.length;
      ctx.translate(x, y);
      ctx.clearRect(-width, -height, width, height);
      ctx.rotate(angelTo * Math.PI / 180); // 画外圆

      ctx.beginPath();
			ctx.setLineWidth(width / 2)
			ctx.setStrokeStyle('#FFF7C5')
      ctx.arc(0, 0, width / 4, 0, 2 * Math.PI);
      ctx.stroke();
      ctx.beginPath();
			ctx.setLineWidth(1)
			ctx.setStrokeStyle('#D9644F')
      ctx.arc(0, 0, width / 2 - 1, 0, 2 * Math.PI);
      ctx.stroke();
      ctx.beginPath();
			ctx.setLineWidth(2)
			ctx.setStrokeStyle('#FDF28C')
      ctx.arc(0, 0, width / 2 - 3, 0, 2 * Math.PI);
      ctx.stroke();
      ctx.beginPath();
			ctx.setLineWidth(15)
			ctx.setStrokeStyle('#F8645E')
      ctx.arc(0, 0, width / 2 - 14, 0, 2 * Math.PI);
      ctx.stroke(); // 装饰点

      var dotColor = that.dotColor;
      var startAngel = 0;
      for (var i = 0; i < 26; i++) {
        ctx.beginPath();
        var radius = width / 2 - 14;
        var xr = radius * Math.cos(startAngel);
        var yr = radius * Math.sin(startAngel);
				ctx.setFillStyle(dotColor[i % dotColor.length])
        ctx.arc(xr, yr, 4, 0, 2 * Math.PI);
        ctx.fill();
        startAngel += 360 / 26 * (Math.PI / 180);
      }

      var jxarr = that.jxarr;
			
      ctx.rotate(-(360 / num) * Math.PI / 180);

      for (var i = 0; i < num; i++) {
        ctx.rotate(360 / num * Math.PI / 180); //ctx.setFontSize(14)

        ctx.font = 'normal bold 14px Arial';
				ctx.setFillStyle('#e75228');
				ctx.setTextAlign("center");
        ctx.fillText(jxarr[i].mc?jxarr[i].mc:'', 0, -(width / 2 - 50));
        ctx.drawImage(jxarr[i].pic, -20, -(width / 2 - 70), 40, 40); //ctx.restore();
      }

      if (num % 2 == 0) {
        ctx.rotate(180 / num * Math.PI / 180);
      }

      for (var i = 0; i < num; i++) {
        //ctx.save();
        ctx.rotate(360 / num * Math.PI / 180);
        ctx.beginPath();
				ctx.setLineWidth(2)
        ctx.moveTo(0, 0);
        ctx.lineTo(0, width / 2 - 20);
        ctx.setStrokeStyle('#f6625c');
        ctx.stroke();
      }

      ctx.draw();
    },
    dotStart: function () {
      var that = this;
      var times = 0;
			clearInterval(dot_inter);
      that.drawCanvas();
      dot_inter = setInterval(function () {
        if (times % 2) {
          var dotColor = that.dotColor_1;
        } else {
          var dotColor = that.dotColor_2;
        }

        times++;
        that.dotColor = dotColor;
        that.drawCanvas();
      }, that.speedDot);
    },
		formsub: function (e) {
		  var that = this;
		  var subdata = e.detail.value;
		  var formcontent = that.info.formcontent;
		  var record = that.record;
		  var formdata = {};
		
		  for (var i = 0; i < formcontent.length; i++) {
		    //console.log(subdata['form' + i]);
		    if (formcontent[i].val3 == 1 && (subdata['form' + i] === '' || subdata['form' + i] === undefined || subdata['form' + i].length == 0)) {
		      app.alert(formcontent[i].val1 + ' 必填');
		      return;
		    }
		
		    if (formcontent[i].key == 'switch') {
		      if (subdata['form' + i] == false) {
		        subdata['form' + i] = '否';
		      } else {
		        subdata['form' + i] = '是';
		      }
		    }
		
		    if (formcontent[i].key == 'selector') {
		      subdata['form' + i] = formcontent[i].val2[subdata['form' + i]];
		    }
		
		    var nowformdata = {};
		    formdata[formcontent[i].val1] = subdata['form' + i];
		  }
		

		  app.post("ApiChoujiang/savememberinfo", {
				hid:that.info.id,
		    formcontent: formdata
		  }, function (res) {
		    if (res.status == 0) {
		      app.alert(res.msg);
		    } else {
		      that.changemaskshow();
		      app.success(res.msg);
		      that.getdata();
		    }
		  });
		}
  }
};
</script>
<style>
.canvas{position: relative;}
.canvas{width: 650rpx;height: 650rpx;margin:0 auto;margin-bottom:20rpx}
.canvas>canvas{z-index: 0;}
.start{height: 200rpx;width: 160rpx;position: absolute;top:50%;left: 50%;margin-left: -80rpx;margin-top: -110rpx;z-index: 2;}

.wrap {width:100%;height:100%;}
.header{width:100%;padding:22rpx 37rpx 0 37rpx;display:flex;justify-content:space-between}
.rule,.my{width:140rpx;height:60rpx;border: 1px solid #f58d40;font-size:30rpx;line-height:60rpx;text-align: center;color: #f58d40;border-radius:5rpx;}
.title {width:640rpx;height:316rpx;margin: auto;margin-top:-60rpx;}

/*次数*/
.border {width: 380rpx;height:64rpx;margin: 0 auto 25rpx;background:#fb3a13;font-size:24rpx;line-height:64rpx;text-align: center;color: #fff;border-radius:45rpx}
.border2 {width:600rpx;height:50rpx;margin: 0 auto;background:#dbaa83;font-size:24rpx;line-height:50rpx;text-align: center;color: #fff;border-radius:10rpx}
.scroll {width:550rpx;height:185rpx;margin:75rpx auto 0 auto;}
.scroll .p {width: 372rpx;height:24rpx;margin: auto;}
.sideBox{  width: 100%;height:100rpx;margin-top:20rpx;padding: 10rpx 0 10rpx 0;background-color: rgba(255, 255, 255, 0.2);border-radius:10rpx;overflow:hidden;}
.sideBox .bd {width: 100%;height:80rpx;overflow:hidden;}
.sideBox .sitem{overflow:hidden;text-align: center;font-size:20rpx;line-height:40rpx;color: #fff;}

/*规则弹窗*/
#mask-rule,#mask {position: fixed;left: 0;top: 0;z-index: 999;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.85);}
#mask-rule .box-rule {position: relative;margin: 30% auto;padding-top: 40rpx;width: 90%;height: 675rpx;border-radius: 20rpx;background-color: #f58d40;}
#mask-rule .box-rule .star {position: absolute;left: 50%;top: -100rpx;margin-left: -130rpx;width: 259rpx;height:87rpx;}
#mask-rule .box-rule .h2 {width: 100%;text-align: center;line-height: 34rpx;font-size: 34rpx;font-weight: normal;color: #fff;}
#mask-rule #close-rule {position: absolute;right: 34rpx;top: 38rpx;width: 40rpx;height: 40rpx;}
/*内容盒子*/
#mask-rule .con {overflow: auto;position: relative;margin: 40rpx auto;padding-right: 15rpx;width: 580rpx;height: 82%;line-height: 48rpx;font-size: 26rpx;color: #fff;}
#mask-rule .con .text {position: absolute;top: 0;left: 0;width: inherit;height: auto;}
/*中奖提示*/
#mask,#mask2{position: fixed;left: 0;top: 0;z-index: 999;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.85);}
#mask .blin,#mask2 .blin {width: 100%;height: 100%;-o-animation: circle 10s linear infinite;-ms-animation: circle 10s linear infinite;-moz-animation: circle 10s linear infinite;-webkit-animation: circle 10s linear infinite;animation: circle 10s linear infinite;}
@keyframes circle {0% {-o-transform: rotate(0deg);-ms-transform: rotate(0deg);-moz-transform: rotate(0deg);-webkit-transform: rotate(0deg);transform: rotate(0deg);}100% {-o-transform: rotate(360deg);-ms-transform: rotate(360deg);-moz-transform: rotate(360deg);-webkit-transform: rotate(360deg);transform: rotate(360deg);}}
#mask .caidai,#mask2 .caidai{position: absolute;left: 0;top: 0;z-index: 1;width: 100%;height: 100%;-o-transform: scale(1.2);-ms-transform: scale(1.2);-moz-transform: scale(1.2);-webkit-transform: scale(1.2);transform: scale(1.2);}
#mask .winning,#mask2 .winning {position: absolute;left: 50%;top: 50%;z-index: 1;width: 675rpx;height: 600rpx;margin: -300rpx 0 0 -338rpx;-o-transform: scale(0.1);-ms-transform: scale(0.1);-moz-transform: scale(0.1);-webkit-transform: scale(0.1);transform: scale(0.1);}
#mask .reback,#mask2 .reback{-o-animation: reback .5s linear forwards;-ms-animation: reback .5s linear forwards;-moz-animation: reback .5s linear forwards;-webkit-animation: reback .5s linear forwards;animation: reback .5s linear forwards;}
@keyframes reback {100% {-o-transform: scale(1);-ms-transform: scale(1);-moz-transform: scale(1);-webkit-transform: scale(1);transform: scale(1);}}
.winning .p{ position: absolute;left: 50%;top: 30%;width:80%;margin-left:-40%;color:#FFF;font-size:52rpx;text-align:center;}
.winning .b{ font-size:44rpx;}
.winning .btn {position: absolute;left: 50%;bottom: 15%;z-index: 2;width: 364rpx;height: 71rpx;line-height: 71rpx;margin-left: -182rpx;background-color:#ffee8d;border-radius:45rpx;-webkit-border-radius:45rpx;color:#f62a39;text-align:center;font-size:45rpx;
}
.winning .text2{padding-top: 70rpx;}
@keyframes shake {50% {-o-transform: rotate(-5deg);-ms-transform: rotate(-5deg);-moz-transform: rotate(-5deg);-webkit-transform: rotate(-5deg);transform: rotate(-5deg);}100% {-o-transform: rotate(5deg);-ms-transform: rotate(5deg);-moz-transform: rotate(5deg);-webkit-transform: rotate(5deg);transform: rotate(5deg);}}
@keyframes fadein {100% {opacity: 1;-o-transform: rotate(360deg);-ms-transform: rotate(360deg);-moz-transform: rotate(360deg);-webkit-transform: rotate(360deg);transform: rotate(360deg);}}
.pageback{position: fixed;width: 100%;height: 100%;top: 0;left: 0;z-index: -1;}

	.popup__container{width: 80%; margin: 10% auto;}
	.popup__modal{position: fixed;top:400rpx;width: 660rpx;height: 720rpx;margin: 0 auto;border-radius: 20rpx;left: 46rpx;}
	.popup__content{text-align: center;padding: 20rpx 0 ;}
	.popup__content image{height: 600rpx;width: 600rpx;}
	
	
	
	#mask-rule1{position: fixed;top: 0;z-index: 10;width: 100%;max-width:640px;height: 100%;background-color: rgba(0, 0, 0, 0.85);}
	#mask-rule1 .box-rule {background-color: #f58d40;position: relative;margin: 30% auto;padding-top:40rpx;width: 90%;height:700rpx;border-radius:20rpx;}
	#mask-rule1 .box-rule .h2{width: 100%;text-align: center;line-height:34rpx;font-size: 34rpx;font-weight: normal;color: #fff;}
	#mask-rule1 #close-rule1{position: absolute;right:34rpx;top: 38rpx;width: 40rpx;height: 40rpx;}
	#mask-rule1 .con {overflow: auto;position: relative;margin: 40rpx auto;padding-right: 15rpx;width:580rpx;height: 82%;line-height: 48rpx;font-size: 26rpx;color: #fff;}
	#mask-rule1 .con .text {position: absolute;top: 0;left: 0;width: inherit;height: auto;}
	
	#mask-rule2{position: fixed;top: 0;z-index: 10;width: 100%;max-width:640px;height: 100%;background-color: rgba(0, 0, 0, 0.85);}
	#mask-rule2 .box-rule {background-color: #f58d40;position: relative;margin: 30% auto;padding-top:40rpx;width: 90%;height:700rpx;border-radius:20rpx;}
	#mask-rule2 .box-rule .h2{width: 100%;text-align: center;line-height:34rpx;font-size: 34rpx;font-weight: normal;color: #fff;}
	#mask-rule2 #close-rule2{position: absolute;right:34rpx;top: 38rpx;width: 40rpx;height: 40rpx;}
	#mask-rule2 .con {overflow: auto;position: relative;margin: 20rpx auto;padding-right: 15rpx;width:580rpx;height:90%;line-height: 48rpx;font-size: 26rpx;color: #fff;}
	#mask-rule2 .con .text {position: absolute;top: 0;left: 0;width: inherit;height: auto;}
	.pay-form .item{width:100%;padding:0 0 10px 0;color:#fff;}
	.pay-form .item:last-child{border-bottom:0}
	.pay-form .item .f1{width:80px;text-align:right;padding-right:10px}
	.pay-form .item .f2 input[type=text]{width:100%;height:35px;padding:2px 5px;border:1px solid #ddd;border-radius:2px}
	.pay-form .item .f2 textarea{width:100%;height:60px;padding:2px 5px;border:1px solid #ddd;border-radius:2px}
	.pay-form .item .f2 select{width:100%;height:35px;padding:2px 5px;border:1px solid #ddd;border-radius:2px}
	.pay-form .item .f2 label{height:35px;line-height:35px;} 
	.subbtn{width:100%;background:#fb3a13;font-size: 30rpx;padding:0 22rpx;border-radius: 8rpx;color:#FFF;margin-top: 30rpx;}
</style>